<template>
  <div id="qcMaterialTimeDiv">
    <Breadcrumb content="日质控信息" />
    <div class="bodyContent">
      <Splitpanes>
        <Pane size="30">
          <div class="saveBtn">
            <vxe-checkbox v-model="searchForm.isShowAll" size="small" content="显示过期的质控品" checked-value="1" unchecked-value="0" @change="findMaterialTree"></vxe-checkbox>
          </div>
          <vxe-toolbar perfect>
            <template #buttons>
              <div class="smallToolTitle">仪器</div>
              <vxe-select v-model="searchForm.instrIds" multiple :filterable="true" clearable @change="valueChangeEvent">
                <vxe-option v-for="instr in instrList" :key="instr.id" :value="instr.id" :label="instr.instrName"></vxe-option>
              </vxe-select>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="treeloading" @click="findMaterialTree"></vxe-button>
            </template>
          </vxe-toolbar>
          <el-scrollbar style="height: calc(100% - 40px)">
            <div class="sampleType">
              <el-scrollbar>
                <el-tree :expand-on-click-node="false" :default-expanded-keys="expandedkeys" :data="materialTree" :props="defaultProps" node-key="id" ref="dataTreeRef" highlight-current class="tools-tree" @node-click="handleClickType" v-loading="treeloading">
                  <template #default="{ data, node }">
                    <div style="float: right">
                      <img :src="`${getAssetsFile('images/qc/' + data.type + '.png')}`" style="width: 15px; height: 15px; margin-right: 10px" />
                      {{ data.name }}
                    </div>
                  </template>
                </el-tree>
              </el-scrollbar>
            </div>
          </el-scrollbar>
        </Pane>
        <Pane size="70">
          <vxe-toolbar perfect>
            <template #buttons>
              质控日期：
              <vxe-input v-model="form.qcDate" placeholder="选择日期" type="date" valueFormat="yyyy-MM-dd" @change="findQcResultList()"></vxe-input>
            </template>
          </vxe-toolbar>
          <div class="tableBox">
            <vxe-table ref="supplierTableRef" class="mytable-scrollbar supplierTableClazz" border="inner" align="center" height="auto" :data="ansWithResults" :loading="rloading" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" :row-style="rowStyle" resizable show-overflow keep-source>
              <vxe-column field="itemDictCode" title="简称" width="100" align="left">
              </vxe-column>
              <vxe-column field="itemDictName" title="质控项目" width="150" align="left">
              </vxe-column>
              <vxe-column field="qcDate" title="质控日期" width="100">
              </vxe-column>
              <vxe-column field="result" title="结果数据" width="100">
              </vxe-column>
              <vxe-column field="mean" title="靶值" width="100">
              </vxe-column>
              <vxe-column field="sd" title="SD值" width="100">
              </vxe-column>
              <vxe-column field="z" title="z值" width="100">
              </vxe-column>
              <vxe-column field="isAlarm" title="失控" width="80">
                <template #default="{ row }">
                  <span>{{ row.isAlarm ? '失控' : '在控' }}</span>
                </template>
              </vxe-column>
              <vxe-column field="outControlRules" title="失控规则" >
              </vxe-column>
            </vxe-table>

          </div>
        </Pane>
      </Splitpanes>
    </div>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
import { formatDateTime, getAssetsFile } from '@/utils/common';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示框
import { isEmpty } from 'lodash';
// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();
let searchForm = ref({
  searchValue: '',
  instrId: '',
  instrIds: [],
  isShowAll: '0'
});
let form = reactive({
  qcDate: formatDateTime(new Date(), 'yyyy-MM-dd')
});
let instrList: any = reactive([]); //左侧仪器下拉项
let treeloading = ref(false); //质控靶值树上的刷新
let expandedkeys: any = reactive([]);
let materialTree: any = reactive([]);
let sltMaterial: any = reactive({}); //最左侧树选中行
let disabledTag = ref(true);

// 最左侧的树
let defaultProps = {
  children: 'children',
  label: 'name'
};
// 方法定义区 =============
// 页面加载时更新
onMounted(() => {
  findInstrSetupList();
  findMaterialTree(); // 获取最左侧质控靶值树数据
});

// 获取左侧仪器下拉选项数据(标题)
function findInstrSetupList() {
  instrList.length = 0; //放入数据前清空数据
  const url = '/lis/instrSetup/getInstrSetupList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: { seachValue: '' }
    })
    .then((res: any) => {
      instrList.push(...res.data);
    })
    .catch((err: any) => {
      VxeMessage('获取左侧仪器表格数据异常', VxeNotifyType.error);
    });
}
// 仪器下拉选择 改变
function valueChangeEvent() {
  findMaterialTree();
}

// 获取最左侧质控靶值树 刷新
function findMaterialTree() {
  treeloading.value = true;
  materialTree.length = 0; //放入数据前清空数据
  expandedkeys.length = 0;

  const url = '/api/qc/qcMaterial/findMaterialTree';
  proxy.$http
    //注意此处的数据条数
    .get(url, { params: { isShowAll: searchForm.value.isShowAll, instrIds: searchForm.value.instrIds } })
    .then((res: any) => {
      if (!isEmpty(res.data)) {
        materialTree.push(...res.data);

        getExpandedkeys();
        sltMaterial = reactive({});
        //如果点击的当前行数据是父级，那就禁用质控品维护的按钮
        if (!sltMaterial.id) {
          disabledTag.value = true;
        } else {
          //如果点击的当前行数据是子集，那就不需要禁用质控品维护的按钮
          disabledTag.value = false;
        }
        handleClickType(res.data[0], null, null);
      }
      treeloading.value = false;
    })
    .catch((err: any) => {
      treeloading.value = false;
      VxeMessage('获取最左侧质控靶值树异常', VxeNotifyType.error);
    });
}

//点击左侧树
function handleClickType(obj: any, node: any, data: any) {
  const isSearch = obj.isSearch;
  if (isSearch == '0') {
    sltMaterial = obj;
    findQcResultList();
  } else {
    sltMaterial = reactive({});
    ansWithResults.length = 0;
  }
}

let rloading = ref(false);
let ansWithResults: any = reactive([]);

// 获取结果数据
function findQcResultList() {
  rloading.value = true;
  ansWithResults.length = 0;
  const url = '/api/qc/qcMaterialItemResult/getQcResultListByQcMaterial';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: { materialId: sltMaterial.id, qcDate: form.qcDate }
    })
    .then((res: any) => {
      if (res.data && res.data.length > 0) {
        ansWithResults.push(...res.data);
        console.log(ansWithResults);
      }
      rloading.value = false;
    })
    .catch((err: any) => {
      rloading.value = false;
      VxeMessage('获取右侧获取质控项目表格数据异常', VxeNotifyType.error);
    });
}
function getExpandedkeys() {
  for (const materialItem of materialTree) {
    pusExpandedkeys(materialItem);
  }
}

function pusExpandedkeys(obj: any) {
  const children = obj.children;
  if (obj.type == 'instrClass') {
    //expandedkeys.push(obj.id);
  }
  if (!isEmpty(children) && children.length > 0) {
    for (const ch of children) {
      pusExpandedkeys(ch);
    }
  }
}
</script>

<style lang="scss" scoped>
#qcMaterialTimeDiv {
  height: 100%;
  .bodyContent {
    height: calc(100% - 60px);
    .splitpanes {
      background-color: $base-white;
      // 显示过期的质控品按钮
      .saveBtn {
        float: right;
        margin: 10px 50px;
      }
      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }
      // 最右侧质控靶值设定表格
      .tableBox {
        height: calc(100% - 30px);
      }
    }

    :deep(.result-table) {
      .number-right .vxe-cell {
        text-align: right;
        span {
          display: inline-block;
          width: calc(100% - 12px);
        }
      }
      .el-icon-warning {
        color: red;
      }
      .el-icon-warning-outline {
        color: $warning-color;
      }
      .el-icon-success {
        color: $success-color;
      }
      .zS2 {
        color: $warning-color;
      }
      .zS3 {
        color: $danger-color;
      }
      .zS-2 {
        color: $brand-color;
      }
      .zS-3 {
        color: #6600ff;
      }
    }
  }
  :deep(.drawerBulkModal) {
    inset: 50px 0 0 70px !important;
  }
  :deep(.el-drawer__body) {
    .iqcOutControl {
      width: 800px;
      // margin: 0 auto;
      transform: translateX(65%);
    }
  }
}
</style>